import 'package:flutter/material.dart';
import 'package:wechat_clone/constants.dart' show AppColors, AppStyles, Constants;
import 'package:wechat_clone/model/conversation.dart' show Conversation, mockConversations, Device;


class _ConversationItem extends StatelessWidget {

  const _ConversationItem({Key key, this.conversation})
  : assert(conversation != null),
  super(key: key);

  final Conversation conversation;

  @override
  Widget build(BuildContext context) {
    Widget avatar;

    if(conversation.isAvatarFromNet()) {
      avatar = Image.network(
        conversation.avatar,
        width: Constants.ConversationAvatarSize,
        height: Constants.ConversationAvatarSize,
      );
    } else {
      avatar = Image.asset(
        conversation.avatar,
        width: Constants.ConversationAvatarSize,
        height: Constants.ConversationAvatarSize,
      );
    }

    Widget avatarContainer;
    if(conversation.unreadMsgCount > 0) {
      Widget unreadMsgCountText = Container(
        width: Constants.UnReadMsgNotifyDotSize,
        height: Constants.UnReadMsgNotifyDotSize,
        alignment: Alignment.center,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(Constants.UnReadMsgNotifyDotSize / 2.0),
          color: Color(AppColors.NotifyDotBg),
        ),
        child: Text(
          conversation.unreadMsgCount.toString(),
          style: AppStyles.UnreadMsgCountDotStyle,
        ),
      );

      //未读消息角标
      avatarContainer = Stack(
        overflow: Overflow.visible,
        children: <Widget>[
          avatar,
          Positioned(
            right: -6.0,
            top: -6.0,
            child: unreadMsgCountText,
          ),
        ],
      );
    } else {
      avatarContainer = avatar;
    }

    Widget muteIcon = Icon(
      IconData(
        0xe755,
        fontFamily: Constants.IconFontFamily,
      ),
      color: Color(AppColors.ConversationMuteIcon),
      size: Constants.ConversationMuteIconSize,
    );

    var _rightArea = <Widget>[
      Text(conversation.updateAt, style: AppStyles.DesStyle,),
      SizedBox(height: 10.0,),
    ];
    if(conversation.isMute) {
      _rightArea.add(
          Icon(IconData(
            0xe755,
            fontFamily: Constants.IconFontFamily,
          ),
          color: Color(AppColors.ConversationMuteIcon),
          size: Constants.ConversationMuteIconSize,
      ));
    } else {
      _rightArea.add(
          Icon(IconData(
            0xe755,
            fontFamily: Constants.IconFontFamily,
          ),
            color: Colors.transparent,
            size: Constants.ConversationMuteIconSize,
          ));
    }

    return Container(
      padding: const EdgeInsets.all(10),
      decoration: BoxDecoration(
        color: Color(AppColors.ConversationItemBg),
        border: Border(
          bottom: BorderSide(color: Color(AppColors.DividerColor), width: Constants.DividerWidth),
        ),
      ),
//      color: Color(AppColors.ConversationItemBg),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          avatarContainer,
          Container(width: 10.0,),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(conversation.title, style: AppStyles.TitleStyle),
                Text(conversation.des, style: AppStyles.DesStyle),
              ],
            ),
          ),
          Container(width: 10.0,),
          Column(
            children: _rightArea,
          ),
        ],
      ),
    );
  }
}

class _DeviceInfoItem extends StatelessWidget {
  const _DeviceInfoItem({
    this.device: Device.WIN
}): assert(device != null);

  final Device device;

  int get iconName {
    return device == Device.WIN ? 0xe75e : 0xe640;
  }
  String get deviceName {
    return device == Device.WIN ? 'Windows' : 'Mac';
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      padding: EdgeInsets.only(left: 24, top: 10, right: 24, bottom: 10),
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(
            width: Constants.DividerWidth,
            color: Color(AppColors.DividerColor),
          ),
        ),
        color: Color(AppColors.DeviceInfoItemBg),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Icon(IconData(
            this.iconName,
            fontFamily: Constants.IconFontFamily,
          ),
            size: 24,
            color: Color(AppColors.DeviceInfoItemText),
          ),
          SizedBox(width: 16.0,),
          Text('$deviceName 微信已登录，手机通知已关闭。', style: AppStyles.DeviceInfoItemTextStyle,),
        ],
      ),
    );
  }
}

class ConversationPage extends StatefulWidget {
  @override
  _ConversationPageState createState() => _ConversationPageState();
}

class _ConversationPageState extends State<ConversationPage> {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemBuilder: (BuildContext context, int index) {
          if(index == 0) {
            return _DeviceInfoItem(device: Device.MAC,);
          }
          return _ConversationItem(conversation: mockConversations[index],);
        },
        itemCount: mockConversations.length,
    );
  }
}
